<template>
    <div class="bz-sub-container">
        <div class="bz-control-bar">
            <div class="bz-control-element" v-for="(vv,k) in attributeEnum" :key="k">
                <div class="bz-title">{{ $case.paramCase(k) }}</div>
                <vs :options="vv" v-model="binding[k]" :hide-selected="false"></vs>
            </div>
            <div class="bz-control-element">
                <button class="btn btn-sm btn-success" @click="addBox">
                    add item
                </button>
                <button class="btn btn-sm btn-danger" @click="removeBox">
                    remove item
                </button>
            </div>
        </div>
        <div class="bz-paragraph bz-show-status">
            <pre v-highlightjs=""><code class="css">.bz-flex-container{
  flex-flow:{{ binding.flexDirection ? binding.flexDirection : 'stretch' }} {{ binding.flexWrap }};
}</code></pre>
        </div>
        <div class="bz-flex-container" :style="bindStyle">
            <div class="bz-demo-box" v-for="(r,i) in boxes" :key="i">{{ r }}</div>
        </div>
    </div>
</template>

<script>
    import VueNextSelect from 'vue-next-select/dist/vue-next-select.es'

    const attributeEnum = {
        flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
        flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
        justifyContent: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'],
        alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
        alignContent: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'],
    };
    export default {
        name: "FlexDemo",
        components: {'vs': VueNextSelect},
        data() {
            return {
                attributeEnum: attributeEnum,
                binding: {
                    flexDirection: 'row',
                    flexWrap: 'nowrap',
                    justifyContent: 'flex-start',
                    alignItems: 'stretch',
                    alignContent: 'stretch'
                },
                boxes: [1, 2, 3, 4, 5]
            }
        },
        methods: {
            addBox() {
                if (this.boxes.length === 0) {
                    this.boxes.push(1);
                }
                this.boxes.push(this.boxes[this.boxes.length - 1] + 1);
            },
            removeBox() {
                if (this.boxes.length > 0) {
                    this.boxes.pop();
                }
            },
        },
        computed: {
            bindStyle() {
                let style = {};
                for (let key in this.binding) {
                    style[this.$case.paramCase(key)] = this.binding[key];
                }
                return style
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../assets/style/flex";
</style>
